<template>
  <div class="reply-item">
    
    <van-cell-group>
      <van-cell>
        <div class="commentInfo">
          <van-image
            :src="commentList.aut_photo"
            fit="cover"
            round=""
          />
          <span class="infoName">{{commentList.aut_name}}</span>
        </div>
        <template #right-icon>
          <div  class="fabulous" @click="replyZangStatus">
              <van-icon name="good-job" v-if="commentList.is_liking" color="#ed3651" />
              <van-icon name="good-job-o"  v-else/>
              <i>{{commentList.like_count}}</i>
          </div>
        </template>
        <div class="textBox">
          <span class="text">{{commentList.content}}</span>
          <div class="commentDate">
            <span>{{commentList.pubdate | relativeTime}}</span>
          </div>
        </div>
        
      </van-cell>
    </van-cell-group>
   
  </div>
</template>

<script>
export default {
  name: 'replyItem',
  data () {
    return {
    }
  },
  props: {
    // 文章评论以及评论回复的数据
    commentList:{
      type: [Array,Object],
      required: true
    }
  },
  methods: {
    // 点击回复评论区的点赞后执行
    replyZangStatus() {
      this.$emit('replyZangStatus')
    }
  }
}
</script>

<style lang="scss" scoped>
.reply-item {
  
    .van-cell-group {
      .van-cell {
      align-items: center;
      font-size: 30px;
      .commentInfo {
      line-height: 1;
       .van-image {
         width: 70px;
         height: 70px;
         margin-right: 14px;
       }
       .infoName {
         font-size: 25px;
         color: #666;
         vertical-align: top;
       }
      
     }
     .textBox {
      margin-left: 85px;
      .commentDate {
        font-size: 25px;
        color: #666;
      }
     }
     .fabulous {
        i {
          margin-left: 10px;
          vertical-align: middle;
        }
       }
    }
    }
  
}
</style>